<template>
  <div class="">
    <div
      class="bg-black/50 grid fixed inset-0 transition-all duration-300 ease-in-out pointer-events-none z-[999]"
      :class="[showDialog ? 'grid-rows-[1fr] opacity-100 pointer-events-auto' : 'grid-rows-[0fr] opacity-0']"
      @click.stop="closeDialog"
    >
      <div class="overflow-hidden">
        <div class="flex relative items-center p-4 w-full h-full">
          <div
            class="relative w-full transition-all duration-300 transform"
            :class="[showDialog ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0']"
          >
            <div class="max-h-[60vh] rounded-2xl flex flex-col w-full px-4 pb-4 overflow-scroll bg-white">
              <!-- -->
              <div class="sticky top-0 flex items-center justify-between py-4 bg-white z-[999]">
                <h2 class="font-medium text-[1.25rem] text-[#121212]">
                  {{ title }}
                </h2>
                <i class="el-icon-close text-xl font-bold text-gray-500 cursor-pointer" @click.stop="closeDialog"></i>
              </div>
              <div @click.stop class="flex-1">
                <slot></slot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    props: {
      showDialog: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '标题'
      }
    },
    methods: {
      closeDialog() {
        // this.$emit("closeDialog");
        this.$parent.showDialog = false
      }
    },
    watch: {
      showDialog: {
        immediate: true,
        deep: true,
        handler(newValue, oldValue) {
          if (!process.client) return
          if (newValue) {
            document.body.style.position = 'fixed'
            document.body.style.width = '100%'
            document.body.style.height = '100%'
          } else {
            document.body.style.position = 'static'
            document.body.style.height = 'auto'
          }
        }
      }
    }
  }
</script>
<style lang="less" scoped></style>
